<template>
  <div class="login-view">
    <div class="login-panel">
      <mu-text-field v-model="username" label="用户名/邮箱" hintText="请输入用户名/邮箱" :errorText="usernameError" type="text"
                     fullWidth icon="person" labelFloat/>
      <br/>
      <mu-text-field v-model="password" label="密码" hintText="请输入密码" :errorText="passwordError" type="password" fullWidth
                     icon="lock" labelFloat/>
      <br/>
      <div class="button">
        <mu-raised-button @click="register" label="注册" class="register-button"/>
        <mu-raised-button @click="doLogin" label="登录" class="login-button" primary/>
      </div>
    </div>

    <div class="third-part-login">

    </div>
  </div>
</template>


<script>
import userApi from '../api/userApi'
export default {
  name: 'login-view',
  beforeCreate () {
    // 使用验证码组件前，需要先清空组件的状态
    this.$store.dispatch('setCaptcha', '')
    this.$store.dispatch('setCaptchaError', '')
    // 如果已经登录，则调转到首页
    if (this.$store.state.user.login) {
      // 使用replace，不向浏览器的历史添加记录
      this.$router.replace('/')
    }
  },
  data () {
    return {
      username: '',
      password: '',
      usernameError: '',
      passwordError: '',
      user: {},
      isShow: true
    }
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload () {
      // 先隐藏
      this.isShow = false
      // $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
      this.$nextTick(() => {
        this.isShow = true
      })
    },
    register () {
      this.$router.push('/register')
    },
    doLogin () {
      if (this.username === '') {
        this.usernameError = '请输入用户名'
      }
      if (this.password === '') {
        this.passwordError = '请输入密码'
      }
      // if (this.$store.state.captcha.captcha.length !== 4) {
      //   this.$store.dispatch('setCaptchaError', '请输入4位验证码')
      // }
      if (this.usernameError === '' &&
          this.passwordError === '' &&
          this.$store.state.captcha.captchaError === '') {
        var data = {
          'username': this.username,
          'password': this.password
          // 'captcha': this.$store.state.captcha.captcha
        }
        var _this = this
        userApi.login(data)
        .then(function (res) {
          window.console.log(res.data['success'])
          if (res.data['success'] === false) {
            _this.$message({
              message: res.data['error'],
              type: 'error'
            })
          } else {
            // 登录成功
            window.console.log(res.data['success'])
            _this.password = ''
            _this.$store.dispatch('doLogin', res.data['data'])
            _this.$router.push('/')
          }
          window.console.log(res.data)
        })
        .catch(function (res) {
          if (res instanceof Error) {
            window.console.log(res.message)
          } else {
            window.console.log(res.data)
          }
        })
      }
    }
  },
  watch: {
    username () {
      this.usernameError = ''
    },
    password () {
      this.passwordError = ''
    }
  }
}
</script>

<style lang="stylus" scoped>
.login-view
  margin-top 50px
  h1
    background #864
  .login-panel
    width 300px
    height 300px
    margin 0 auto
    .button
      width 300px
      margin 0 auto
      .register-button
        margin-left 24px
      .login-button
        margin-left 76px



</style>
